<template>
  <div class="account-header">
    <div class="avatar-contain">
      <avatar :avatarDiameter="'72px'"></avatar>
    </div>
    <div class="info">
      <div class="nickname">{{ user.nickname }}</div>
      <div class="email"><i class="iconfont">&#xe775;</i>{{ user.email }}</div>
    </div>
    <div class="create-time">创建时间：{{ user.create_time }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Avatar from '@/components/Avatar/index'
export default {
  name: 'AccountHeader',
  data () {
    return {
      defaultAvatar: `this.src="${require('images/avatar/default.jpg')}`
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  components: {
    Avatar
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.account-header
  position relative
  display flex
  flex-direction row
  align-items center
  width 100%
  height 120px
  padding 0 50px
  border-radius 6px
  box-shadow 0 5px 15px rgba(0, 0, 0, 0.2)
  box-sizing border-box
  .avatar-contain
    display flex
    justify-content center
    align-items center
    width 76px
    height 76px
    border 1px solid shadow-color
    background-color #fff
    border-radius 50%
  .info
    margin-left 20px
    .nickname
      font-size 24px
      font-weight bold
    .email
      margin-top 10px
      margin-bottom -10px
      .iconfont
        margin-right 5px
  .create-time
    position absolute
    top 10px
    right 10px
</style>
